<template>
  <div>
    <Header />
    <div class="Breadcrumbs">
      <el-button size="mini" class="pubBtn3" style="margin-right:20px;" type="button" @click="$router.push('/early')">返回
      </el-button>
      <el-breadcrumb separator="-">
        <el-breadcrumb-item><span class="no-redirect">证书到期预警</span> </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-main>
      <el-table class="top" :header-cell-style="{background:'#F3F8FE'}" :data="list" border style="width: 90%">
        <el-table-column prop="number" align="center" label="证书编号">
        </el-table-column>
        <el-table-column prop="name" align="center" label="证书名称">
        </el-table-column>
        <el-table-column prop="type" align="center" label="证书类型">
        </el-table-column>
        <el-table-column prop="term_time" align="center" label="证书有效期">
        </el-table-column>
        <el-table-column prop="images" align="center" label="证书图片" width="400">
          <template slot-scope="scope">
            <el-upload action="#" :file-list="scope.row.file"  list-type="picture-card" disabled  :auto-upload="false"
              :on-preview="handlePictureCardPreview">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <Service />
  </div>
</template>

<script>
import { CostShow, certificateList } from '@/api'
import Header from "@/components/Header"
import Breadcrumb from '@/components/Breadcrumb'
import Service from '@/components/Service'
export default {
  components: {
    Header,
    Breadcrumb,
    Service
  },
  data() {
    return {
      list: [],
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  mounted() {
    this.getdata();
  },
  methods: {
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    async getdata() {
      try {
        const res = await certificateList({
          user_id: this.$store.state.user.id,
          push_id: this.$route.query.id
        });
        res.map(res => {
          if (res.images.length > 0) {
            let arr = res.images.split(',')

            let file = []
            arr.map((res_, index) => {
              // console.log(res_);
              let Obj = {
                url: res_
              }
              file.push(Obj)
              res.file = file
              // console.log(res,'sd');
            })
          }
        })
        this.list = res;
        // console.log(this.list,'asdasdasihasdh');
        // this.page = res.page;
      } catch (e) {
        this.$message.error(e);
      }
    },
    rowClick(row, event, column) {
      const pid = row.pid;
      const ano = row.ano;
      this.$router.push({ path: "/detail", query: { "pid": pid } })
    },
  }
}
</script>

<style scoped lang="less">
.Breadcrumbs {
  margin-left: 0 !important;
}

.top {
  margin: 30px 0;
}

::v-deep .el-upload {
  display: none;
}
</style>
